<div
  class="devui-accordion-item-title devui-over-flow-ellipsis"
  [ngClass]="{
    open: open,
    active: childActivated,
    disabled: disabled
  }"
  title="{{ title }}"
  (click)="!disabled && toggle($event)"
>
  <div
    class="devui-accordion-splitter"
    [ngClass]="{
      'devui-parent-list': deepth === 0
    }"
    [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
  ></div>
  <ng-container *ngIf="!menuItemTemplate">
    {{ title }}
  </ng-container>
  <ng-template
    *ngIf="menuItemTemplate"
    [ngTemplateOutlet]="menuItemTemplate"
    [ngTemplateOutletContext]="{
      parent: parent,
      item: item,
      deepth: deepth
    }"
  ></ng-template>
  <span class="devui-accordion-open-icon">
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
        ></path>
      </g>
    </svg>
  </span>
</div>
